<template>
    <div id="edititem">
        <div class="banner">
            <p>
                <span>首页</span>
                <span> / </span>
                <span>数据统计</span>
                <span> / </span>
                <span>销售统计</span>
                <span> / </span>
                <span class="title">用户编辑</span>
            </p><br>
            <p class="header">用户编辑</p>
        </div>
        <div class="bx">
            <el-form :model="form" label-width="80px">
                <el-form-item label="姓名">
                <el-input v-model="form.name" />
                </el-form-item>
            </el-form>
            <el-form :model="form" label-width="80px">
                <el-form-item label="年龄">
                <el-input v-model="form.age" />
                </el-form-item>
            </el-form>
            <el-form :model="form" label-width="80px">
                <el-form-item label="地址">
                <el-input v-model="form.address" />
                </el-form-item>
            </el-form>
            <el-form :model="form" label-width="80px">
                <el-form-item label="邮箱">
                <el-input v-model="form.email" />
                </el-form-item>
            </el-form>
            <el-form :model="form" label-width="80px">
                <el-form-item label="销售金额">
                <el-input v-model="form.money" />
                </el-form-item>
            </el-form>
            <el-form :model="form" label-width="80px">
                <el-form-item label="电话">
                <el-input v-model="form.phone" />
                </el-form-item>
            </el-form>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" :plain="true">添加</el-button>
                <el-button @click="router.go(-1)">返回</el-button>
            </el-form-item>
            
        </div>

    </div>

</template>

<script setup>
import axios from 'axios';
// import { ElMessage } from 'element-plus'
import { reactive,ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const open = () => {
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
}

const router=useRouter();
const route=useRoute();
const form = ref({
  name: route.query.name,
  address: route.query.address,
  age: route.query.age,
  email: route.query.email,
  money: route.query.money,
  phone: route.query.phone,
  order:route.query.order,
  sex:route.query.sex,
  member:route.query.member,
  id:route.query.id,
})
const onSubmit = () => {
  axios.post('/api/edititem/list',{form}).then((res)=>{
    router.go(-1);
    open();
  })
}
</script>

<style scoped>
.banner{
  height: 80px;
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
  position: fixed;
  top:40px;
  left: 15%;
  padding-top: 20px;
}
.banner p{
  font-size: 12px;
  color: #AAA;
}
.banner .title{
  color: #000;
}
.banner .header{
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
#edititem    .bx{
  width: 800px;
  height: 500px;
  margin: auto;
  margin-top: 120px;
  background: #fff;
  overflow: hidden;
}
#edititem .bx .el-form{
    margin: 30px 60px ;
}
#edititem .bx .el-button{
    margin: auto;
}
</style>